<template>
  <div class="follow-item">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(item, index) in list" :key="index">
        <van-image
          slot="icon"
          round
          :src="item.photo"
        ></van-image>
        <span slot="title">{{ item.name }}</span>
        <span slot="label">粉丝数：{{ item.fans_count }}</span>
        <mutual-follow
          :target-id="item.id"
          :status="item.mutual_follow"
          @change="item.mutual_follow=false"
        ></mutual-follow>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getFollowList } from '@/api/user.js'
import { cancelFollow } from '@/api/user.js'
import { mapState } from 'vuex'
import MutualFollow from './mutual-follow.vue'
export default {
  name: 'FollowItem',
  components: {
    MutualFollow
  },
  data() {
    return {
      total: null,
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  computed: {
    ...mapState(['userId'])
  },
  created() {
  },
  methods: {
    async onLoad() {
      const { data } = await getFollowList(
        {
          page: this.page,
          per_page: 10
        },
        this.userId
      )
      console.log(data.data.results);
      this.list.push(...data.data.results)
      this.page++
      console.log(this.list);
      this.loading = false
      if (data.data.results.length === 0) {
        this.finished = true
      }
    },
    async changeFollow(id, index) {
      // 要取消关注
      this.list[index].btnloading = true
      const { data } = await cancelFollow(id)
      this.list[index].canceled = true
      this.list[index].btnloading = false
      console.log(data);
    }
  }
}
</script>

<style scope lang="less">
.van-cell {
  padding: 28px;
  .van-image {
    width: 80px;
    height: 80px;
    margin-right: 30px
  }
}
</style>
